<template>
	<view>
		<view class="m-frame-content m-frame-box">
			<view class="ture-content">
				<view class="title" v-for="(item, index) in data.shuju" :key="index">{{item.name}}：<text class="num">{{item.num}}</text></view>
				<view class="input"><input type="number" v-model="makerAmount" placeholder="请点击输入领取流量" /></view>
				<view class="tips"><rich-text :nodes="data.remark"></rich-text></view>
			</view>
			<view class="m-frame-footer">
				<view class="u-reset" @tap="rest">重置</view>
				<view class="u-confirm" :class="[isCannt?'on':'']" @tap="confirm">确定</view>
			</view>
		</view>
		<paymentPassword :show="payFlag" digits="6" @confirm="onConfirm" @cancel="hideFlag"></paymentPassword>
		<view class="m-full-loading" v-if="showLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common_zb.js';
	import md5 from '@/common/md5.js'
	export default {
		data() {
			return {
				data:[],
				makerAmount:'',
				isCannt:false,
				showLoading: false,
				payFlag:false
			}
		},
		methods: {
			hideFlag(){
				this.payFlag = false
			},
			rest(){
				this.makerAmount = ''
			},
			confirm(){
				if(this.makerAmount == ''){
					henglang.showToast('请输入领取流量')
				}else{
					this.payFlag = true
				}
			},
			onConfirm(e){
				let that = this
				uni.showLoading()
				henglang.post('Maker/apply',{money:Number(that.makerAmount),paypwd:md5(e)},true,function(res){
					uni.hideLoading()
					henglang.showToast(res.data.msg,res.data.code == 0?500:2000);
					that.payFlag = false
					if(res.data.code == 0){
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/jewel/user/mammon_deital'
							})
						}, 500)
					}
				},function(res){
					henglang.showToast('请求失败');
				});
			}
		},
		onLoad() {
			let that = this
			that.showLoading = true
			henglang.post('Maker/traffic_view_new', {}, true, function (res){
				that.data = res.data.data
				if(that.data.can == 0) that.isCannt = true
				that.showLoading = false
			})
		},
		onNavigationBarButtonTap({index}) {
		    if (index == 0) {
				uni.navigateTo({
					url:'/pages/jewel/user/mammon_deital'
				})
		        
		    }
		}
	}
</script>

<style>
	
	.m-frame-box {
	    width: 100%;
	    height: 100%;
	}
	.m-frame-box .ture-content{
		padding: 30rpx;
	}
	.m-frame-box .ture-content .title{
		font-size: 36rpx;
		padding: 5rpx 0;
	}
	.m-frame-box .ture-content .input{
		padding: 30upx 0;
	}
	.m-frame-box .ture-content .input input{
		width: 99%;
		font-size: 40upx;
		text-align: center;
		border: 1px solid #828080;
		border-radius: 10upx;
		padding: 20upx 0;
	}
	.m-frame-box .ture-content .tips{
		font-size: 30rpx;
		line-height: 50rpx;
	}
	.m-frame-footer {
	    height: 97upx;
	    width: 100%;
	    position: absolute;
	    bottom: 0px;
	    left: 0;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 97upx;
	    text-align: center;
	    font-size: 32upx;
	}
	.m-frame-footer .on{
		background: #CCCCCC;
	}
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	}
	
</style>
